<template>
    <div>
      <div v-for="o in details" >
        <div class="mytop">
          <el-row>
            <el-col :span="10">
              <el-image    style="width: 300px; height: 200px" :src="o.shopInfo.imags[0].imagUrl" fit="fill">
              </el-image>
            </el-col>
            <el-col :span="12" :offset="1">
              <el-row>
                <el-col :span="4">价格:</el-col>
                <el-col :span="20">{{o.shopInfo.shopPrice}}元</el-col>
              </el-row>
              <el-row class="mytop">
                <el-col :span="4">商品质量:</el-col>
                <el-col :span="20">
                  <el-rate
                    v-model="o.qualityStars"
                    :colors="colors" show-text>
                  </el-rate>
                </el-col>
              </el-row>
              <el-row class="mytop">
                <el-col :span="4">描述相符:</el-col>
                <el-col :span="20">
                  <el-rate
                    v-model="o.describeStars"
                    :colors="colors" show-text>
                  </el-rate>
                </el-col>
              </el-row>
              <el-row class="mytop">
                <el-col :span="4">评价商品:</el-col>
                <el-col :span="20"><el-input rows="4" type="textarea" v-model="o.content"></el-input></el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-row class="mytop">
        <el-col :offset="11" :span="2">物流服务</el-col>
        <el-col :span="10">
          <el-rate
            v-model="commodity.serviceStars"
            :colors="colors" show-text>
          </el-rate>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
      <el-row>
        <el-col :offset="11" :span="8" >
          <p>
          <el-button type="primary" size="mini" @click="confirm" plain >确认评价</el-button>
          <el-button type="danger"  size="mini" @click="cancel" plain>取消</el-button>
          </p>
        </el-col>
      </el-row>
        </span>
    </div>
</template>

<script>
    export default {
        name: "EvaluateView",
        data(){
          return{
            commodity:{oid:0,uid:0,serviceStars:null},
            details:[],
            colors: ['#99A9BF', '#F7BA2A', '#FF9900']
          }
        },
        methods:{
          confirm(){
            var params = {};
            Object.keys(this.commodity).forEach(item => {
              params[item]=this.commodity[item];
            });
            //Object.keys(this.details).forEach(item => {
              params["detailList"]=this.details;
            //});
            this.$axios
            .post("commodity/commodity.action",params)
            .then(res=>{
              if (res.data.code>0){
                this.cancel();
                this.$message.success(res.data.msg);
                this.$parent.$parent.getOrders();
              }else {
                this.$message.error(res.data.msg);
              }
            })
            .catch(err=>{this.$message.error(err)})

          },
          getData(oid){
            this.commodity.oid=oid;
            this.$axios.get("order.action/"+oid)
            .then(res=>{
              //组装
              res.data.ordersDetails.forEach(item=>{
                item.shopInfo.imags[0].imagUrl="http://127.0.0.1:9090/demo/"+item.shopInfo.imags[0].imagUrl;
                var detail={
                  shopInfo: item.shopInfo,
                  content:"",
                  qualityStars:null,
                  describeStars:null,
                }
                this.details.push(detail);
              });
            })
            .catch(err=>{this.$message.error(err)})
          },
          cancel(){
            //关闭窗口
            this.$parent.$parent.dialogVisible3 = false;
            this.details=[];
          }
        }
    }
</script>

<style scoped>
 .mytop{
   margin-top: 15px;
 }
</style>
